<template>
    <div class="layout">
        <Menu mode="horizontal" theme="dark" active-name="liveMan" @on-select="menuClick">
            <div class="layout-logo"><a href="/"><h3 >松果直播</h3></a></div>
            <div class="layout-nav">

                <MenuItem name="liveMan">
                    <Icon type="ios-keypad"></Icon>
                    直播管理
                </MenuItem>
                <MenuItem name="hostMan">
                    <Icon type="ios-analytics"></Icon>
                    主播管理

                </MenuItem>
                <MenuItem name="liveBaike">
                    <Icon type="ios-paper"></Icon>
                    直播百科
                </MenuItem>
                <MenuItem name="down">
                    <Icon type="ios-paper"></Icon>
                    工具下载
                </MenuItem>
            </div>
            <Dropdown style="float: right" placement="bottom-end" @on-click="me">
                <Avatar class="avatar" style="background-color: #bbbec4" icon="person" />
                <DropdownMenu slot="list" >
                    <DropdownItem>我的主页</DropdownItem>
                    <DropdownItem>我的直播</DropdownItem>
                    <DropdownItem>提出问题</DropdownItem>
                    <DropdownItem name="logout">退出登录</DropdownItem>
                </DropdownMenu>
            </Dropdown>

            <span class="add">
                <Button type="primary" style="" size="large" @click="createLive">创建直播</Button>
            </span>

        </Menu>

        <div class="layout-content">
            <transition name="fade" mode="out-in">
                <router-view></router-view>
            </transition>
        </div>
    </div>
</template>
<script>
    export default {
        data(){
            return {

            }
        },
        methods:{
            me(name){
                if (name == "logout"){
                    this.$store.dispatch('LogOut').then(() =>{
                        this.$router.push({ path: '/login' });
                    })
                }

            },
            createLive(){
                this.$router.push({ path: '/create_event' });
            },
            menuClick(name){
                this.$router.push({ name: name, params: { userId: 123 }})
            }
        }
    }
</script>
<style scoped lang="less">
    .add {
        float: right;
        margin-right: 80px;
    }
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 20px;
        //float: right;
        margin-right: 20px;
        top: 11px;
    }
    .layout {
        border: 1px solid #d7dde4;
        background: #f5f7f9;
    }

    .layout-logo {
        width: 150px;
        height: 40px;
        background: #5b6270;
        border-radius: 3px;
        float: left;
        position: relative;
        top: 10px;
        left: 20px;
        text-align: center;
        line-height: 40px;
        color: white;
        a {
            color: white;
        }
        a:hover {
            color: rgba(202, 202, 202, 0.49);
        }
    }

    .layout-nav {
        width: 480px;
        margin: 0 auto;
    }

    .layout-assistant {
        width: 300px;
        margin: 0 auto;
        height: inherit;
    }

    .layout-breadcrumb {
        padding: 10px 15px 0;
    }

    .layout-content {
        min-height: 200px;
        margin: 15px;
        overflow: hidden;
        background: #fff;
        border-radius: 4px;
        padding: 15px;
    }

    .layout-content-main {
        padding: 10px;
    }

    .layout-copy {
        text-align: center;
        padding: 10px 0 20px;
        color: #9ea7b4;
    }
</style>